<template>
  <div class="index">
    <!-- 销售数据 -->
    <div class="index-sales">
      <div class="index-sales-box">
        <span class="index-sales-box-name">销售数据统计</span>
        <el-row :gutter="20">
          <Cards :number='10' colors='#FFA333' ionc='DealSvg' name='今日成交数量'/>
          <Cards :number='120' colors='#A155E8' ionc='DealSvg' name='昨日成交数量'/>
          <Cards :number='1405' colors='#6D91FF' ionc='DealSvg' name='本月成交数量'/>
          <Cards :number='110' colors='#A233A2' ionc='DealSvg' name='累计成交量(年)'/>
          <Cards :number='123' colors='#AED75B' ionc='MoneySvg' name='今日成交金额'/>
          <Cards :number='1454' colors='#A27B33' ionc='MoneySvg' name='昨日成交金额'/>
          <Cards :number='1657' colors='#8D8DD1' ionc='MoneySvg' name='本月成交金额'/>
          <Cards :number='112122' colors='#C14E4E' ionc='MoneySvg' name='累计成交金额(年)'/>
        </el-row>
      </div>
    </div>
    <!-- 统计 -->
    <el-row :gutter="20">
      <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24" style="margin-bottom: 20px;">
        <Pays/>
      </el-col>
      <!--            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="margin-bottom: 20px;">
                      <Clients />
                  </el-col>-->
      <!--            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="margin-bottom: 20px;">
                      <Maps />
                  </el-col>-->
      <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24" style="margin-bottom: 20px;">
        <Product/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Cards from '../../components/analyze/cards'
import Pays from '../../components/analyze/pay'
import Clients from '../../components/analyze/client'
import Maps from '../../components/analyze/map'
import Product from '../../components/analyze/product'

export default {
  components: {
    Cards,
    Pays,
    Clients,
    Maps,
    Product
  }
}
</script>

<style scoped>
.index {
  background: #F5F7F9;
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
}

.index-sales {
  width: 100%;
  height: auto;
  padding: 20px 15px;
  box-sizing: border-box;
  /* background: brown; */
  /* border:  1px solid #E6E6E6; */
  border-radius: 5px;
  background: #ffffff;
  margin-bottom: 20px;
}

.index-sales-box {
  border: 1px solid #E6E6E6;
  width: 100%;
  height: auto;
  position: relative;
  padding: 25px 15px 5px;
  box-sizing: border-box;

}

.index-sales-box-name {
  position: absolute;
  width: 130px;
  height: 30px;
  background: #ffffff;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  color: #000000;
  left: 25px;
  top: -15px;
}


</style>
